<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现数据响应式</title>
    <script src="myVue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <p>姓名：<span style="color:red;">{{name}}</span></p>
        <p>说点啥：{{message}}</p>
        <input v-model="test">
        {{test}}
        <h3>总结：</h3>
        <h5>插值表达式：</h5>
        <p>1、插值表达式在文本节点中时，直接获取文本节点的文本，然后通过正则表达式来匹配到该插值表达式的字符语句，
            然后通过字符串的replace方法去掉“{{”和“}}”留下花括号之间的字符值，之后判断data中是否有该字符值，如果有就将文本节点的文本替换为 data 中的值</p>
        <p>2、插值表达式在元素节点中时，找到该元素节点中的文本节点的文本，......（之后的步骤同1）</p>
        <h5>v-model双向数据绑定：</h5>
        <p>v-model是在元素节点的（自定义）属性集合中，所以判断该属性集合中是否含有 v-model，若有获取到 v-model属性里面的字符值，
            然后将data中定义的值赋值给该 Dom 节点（也就是输入框）的 value 值，同时给该 Dom 节点（也就是输入框）添加 input 事件，监听值的变化，当input的value值变化时，
            将input中的value值赋值给data中相应的值，同时通过 Proxy 的 set 方法来监听到 data 对象中值的变化时，再次修改视图，使之成为双向数据绑定。

        </p>
    </div>


    <script>
        let vm = new vue({
            el: '#app',
            data: {
                name: '小笑残虹',
                message: '认真学习的样子真是太帅了！',
                test: '双向数据绑定',
                msg: 'vue3.0双向数据绑定原理（Proxy）'
            }
        })

        console.log(vm)
        console.log(vm._data.name)
    </script>
</body>

</html>